<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分类模块</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
	<script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <!-- <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script> -->

    <style type="text/css">
        .mainbox{width: 40%; height: 350px;border: 1px solid #eee; overflow: auto; margin-top: 15px; padding: 10px;float: left;}
        #tt{margin-top:15px;}
        #ff{float: left; margin-top: 15px; margin-left: 20px;}
        #ff>div{margin-top: 15px;}
        #last2{margin-top: 5px!important;}
        #last2 a {margin: 15px}
        #ff #last a{margin: 15px; margin-bottom: 8px}
        #ff label{margin-right: 10px}
        #w>div{margin-bottom: 25px}
    </style>
</head>
<body>
    <div class="linkbtn">
        <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:15%" type='1'>产品</a>
        <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:15%" type='2'>新闻</a>
        <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:15%" type='3'>相册</a>
    </div>
    <div>
        <div class="mainbox">
            <div style="position:relative">
                <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width:130px" onclick="expandAll()">全部展开</a>
                <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" style="width:130px" onclick="collapseAll()">全部合并</a>
                <input type="text" placeholder="查询分类" style="width:138px;height: 23px; margin-left:10px; padding-left: 10px; position: absolute;top: 0;left: 275px;" id="chaxun">
                <div class="panel-icon icon-search" style="width:16px;height: 16px; position: absolute;left: 413px;top: 14px;cursor: pointer;" id="searchbtn"></div>
            </div>
            
            <ul id='tt'></ul>
        </div>
        <form id="ff" method="post">
            <div>
                <label for="text">分类名称:</label>
                <input class="easyui-textbox" type="text" name="text" data-options="required:true" />
            </div>
            <div>
                <label for="des">分类描述:</label>
                <textarea name="des" id="" cols="50" rows="4" style="vertical-align: top"></textarea>
            </div>
            <div>
                <label for="type">分类编号</label>
                <input class="easyui-numberspinner" data-options="min:1,max:20,required:true" style="width:100px;" value="1" name="type" id="typeff" />
            </div>
            <input type="text" name='parentId' style="display:none" id='parentId'>
            <div style="text-align:center;padding:5px" id="last">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="padding:0 20px">提交分类</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="padding:0 20px">清空表格</a>
            </div>
            <div style="text-align:center;padding:5px" id="last2">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick='showDi()' style="padding:0 20px">删除选中</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="openWindow()" style="padding:0 20px">修改选中</a>
            </div>
            <div id="w" class="easyui-window" title="修改分类" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:250px;padding:10px;">
                <div>
                    <label for="text">分类名称:</label>
                    <input  type="text" id="xgtext" value="" />
                </div>
                <div>
                    <label for="des">分类描述:</label>
                    <textarea  id="xgdes" cols="50" rows="4" style="vertical-align: top"></textarea>
                </div>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="xgForm()" style="padding:0 20px; margin-left:62px;">提交分类</a>
                <div id="dd" class="easyui-dialog" >
                    <div style="width: 120px; margin: 35px auto">你确定要删除吗？</div>
                </div>
                <div id="dd2" class="easyui-dialog" >
                    <div style="width: 145px; margin: 35px auto">请选择一条分类项哟~</div>
                </div>
            </div>
        </form>
    </div>

    <script>
        $('#ff').attr('action',`${parent.publicUrl}classify/data`);
        
        function gettype(type){
            var dataArr=[];
            var idArr=[];
            $('#tt').tree({
                url:`${parent.publicUrl}classify/list/${type}`,
                animate:true,
                method:'post',
                lines:true,
                dnd:true,
                onLoadSuccess:function(node, data){
                    function getDes(obj){
                        if(!obj.des)obj.des='暂无描述哟~';
                        dataArr.push(obj.des);
                        if(obj.children){
                            $(obj.children).each(function(index,value){
                                getDes(value);
                            })
                        }
                    }
                    getDes(data[0]);
                    
                    function getID(obj){
                        idArr.push(obj._id);
                        if(obj.children){
                            $(obj.children).each(function(index,value){
                                getID(value);
                            })
                        }
                    }
                    getID(data[0]);

                    $(dataArr).each(function(index,value){
                        $('.tree-node').eq(index).attr('des',value);
                    })
                    $(idArr).each(function(index,value){
                        $('.tree-node').eq(index).attr('_id',value);
                    })
                   
                    $('.tree-node').each(function(index,ele){
                        
                        $(ele).tooltip({
                            position: 'top',
                            content: `<span style="color:#fff">${$(ele).attr('des')}</span>`,
                            onShow: function(){
                                $(ele).tooltip('tip').css({
                                    backgroundColor: '#666',
                                    borderColor: '#666'
                                });
                            }
                        });
                    })
                },
                onBeforeSelect:function(node){
                    $(node.target).attr('_id',node._id);
                    $(node.target).attr('type',node.type);
                },
                onDblClick:function(node){
                    $(node.target).removeClass('tree-node-selected');
                },
                onDrop:function(target,source,point){
                    var des=source.des;
                    $('.tree-node').each(function(index,ele){
                        if(!$(ele).attr('des'))$(ele).attr('des',des);
                        $(ele).tooltip({
                            position: 'top',
                            content: `<span style="color:#fff">${$(ele).attr('des')}</span>`,
                            onShow: function(){
                                $(ele).tooltip('tip').css({
                                    backgroundColor: '#666',
                                    borderColor: '#666'
                                });
                            }
                        });
                    })
                    $(source.target).tooltip({
                        position: 'top',
                        content: `<span style="color:#fff">${$(source.target).attr('des')}</span>`,
                        onShow: function(){
                            $(source.target).tooltip('tip').css({
                                backgroundColor: '#666',
                                borderColor: '#666'
                            });
                        }
                    });
                    $.ajax({
                        url:parent.publicUrl+'classify/data/'+source._id,
                        type:'put',
                        data:{
                            parentId:$(target).attr('_id')
                        }
                    }).done(function(){
                        $(source.target).attr('des',source.des);
                    })
                }
                
               //模拟数据
                // data: [{
                //     id: 23,
                //     text: 'node23'
                // },{
                //     text: 'node24',
                //     state: 'closed',
                //     children: [{
                //         text: 'node241'
                //     },{
                //         text: 'node242'
                //     }]
                // }]
            })
        }
        
       
        gettype(1);
        $('.linkbtn a').on('click',function(){
            var type=$(this).attr('type');
            gettype(type);
            $('#_easyui_textbox_input3').val(type);
            $('#_easyui_textbox_input3~input').val(type);
        })

        function collapseAll(){
			$('#tt').tree('collapseAll');
		}
		function expandAll(){
			$('#tt').tree('expandAll');
        }
        function submitForm(){
            if($('.tree-node-selected').length>0){
                $('#parentId').val($('.tree-node-selected').attr('_id'));
                $('#typeff').val(Number($('.tree-node-selected').attr('type')));
            }else{
                $('#parentId').val(null);
            }
            if($('.tree-node-selected').length>0){
                try{
                    $('#ff').form('submit');
                }catch(e){

                }finally{
                    if($('#_easyui_textbox_input1~.textbox-value').val())
                    location.reload();
                }
            }else{
                $('#dd2').window('open');
            }
            
		}
		function clearForm(){
			$('#ff').form('clear');
		}
        function DeletForm(){
            $.ajax({
                url:`${parent.publicUrl}classify/data/${$('.tree-node-selected').attr('_id')}`,
                type:'delete'
            })
            location.reload();
            
        }
        var xgID=0;
        function openWindow(){
            $('#w').window('open');
            xgID=$('.tree-node-selected').attr('_id');
            $.ajax({
                url:parent.publicUrl+'classify/data/'+$('.tree-node-selected').attr('_id'),
                type:'get',
                dataType:'json'
            }).done(function(data){
                $('#xgtext').val(data.text);
                if(data.des){
                    $('#xgdes').val(data.des);
                }else{
                    $('#xgdes').val('');
                    $('#xgdes').attr('placeholder','暂无描述哟~');
                }
            })
        }
        
        function xgForm(){
            console.log(xgID);
            $.ajax({
                url:parent.publicUrl+'classify/data/'+$('.tree-node-selected').attr('_id'),
                type:'put',
                data:{
                    text: $('#xgtext').val(),
                    des: $('#xgdes').val()
                }
            }).done(function(data){
                location.reload();
            })
        }

        $('#dd').dialog({
            title: 'are you sure?',
            width: 300,
            height: 180,
            closed: true,
            cache: false,
            modal: true,
            resizable:true,
            buttons:[{
                text:'确定',
                handler:DeletForm
            },{
                text:'取消',
                handler:cancel
            }]
        });
        $('#dd2').dialog({
            title: 'please select one item',
            width: 300,
            height: 180,
            closed: true,
            cache: false,
            modal: true,
            resizable:true,
            buttons:[{
                text:'确定',
                handler:function(){$('#dd2').dialog('close');}
            }]
        });
        
        function cancel(){
            $('#dd').dialog('close');
        }

        function showDi(){
            if($('.tree-node-selected').length>0){
                $("#dd").dialog("open");
            }else{
                $("#dd2").dialog("open");
            }
        }

        $('#chaxun').on('blur',function(){
            var v=$(this).val();
            var reg=new RegExp(v,"i");
            $('.tree-node').each(function(index,ele){
              if(reg.test($(ele).find('.tree-title').html()) && v!=''){
                   expandAll();
                  $(ele).addClass('tree-node-hover');
              }else{
                  $(ele).removeClass('tree-node-hover');
              }
            })
           
        })
        
        
    </script>
</body>
</html>